import { useId } from "react";
import { cn } from "@/common/cn";
import {
  BTN_SHAPES,
  BTN_SIZES,
  BTN_STATUS,
  BTN_VARIANTS,
  type ButtonShape,
  type ButtonStatus,
  type ButtonVariant,
} from "./Button";

export type FilterOption = {
  label: string;
  value: string;
};

export type FilterProps = Omit<
  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
  "onChange"
> & {
  options: FilterOption[];
  value?: string | undefined;
  checked?: boolean;
  status?: ButtonStatus | undefined;
  shape?: ButtonShape | undefined;
  variant?: ButtonVariant | undefined;
  size?: Size | undefined;
  onChange?: (value: string | undefined) => void;
};

export default function Filter({
  value,
  options,
  className,
  checked,
  onChange,
  status,
  shape,
  variant,
  size,
  ...p
}: FilterProps) {
  const name = useId();
  const btnClass = cn(
    "btn",
    status && BTN_STATUS[status],
    shape && BTN_SHAPES[shape],
    variant && BTN_VARIANTS[variant],
    size && BTN_SIZES[size],
  );
  return (
    <div className={cn("filter", className)} {...p}>
      <input
        className={cn(btnClass, "filter-reset")}
        type="radio"
        name={name}
        aria-label="All"
        onClick={() => onChange?.(undefined)}
      />
      {options.map((o) => (
        <input
          className={btnClass}
          type="radio"
          checked={value === o.value}
          value={o.value}
          key={o.value}
          name={name}
          onChange={() => onChange?.(o.value)}
          aria-label={o.label}
        />
      ))}
    </div>
  );
}
